<template>
  <div class="page-comment">
    <div class="mark df">
      <div class="mark-left df jcsb fdc">
        <div class="num">5.0</div>
        <div class="total">综合评分</div>
        <div class="higher">高与周边商家96%</div>
      </div>
      <div class="mark-right df fdc jcsb">
        <div class="atitude">
          服务态度
          <van-rate
            size="14px"
            gutter="5px"
            color="#fdc203"
            class="stars"
            v-model="value1"
            allow-half
            void-icon="star"
            void-color="#eee"
          />
          <span class="score-num">{{ value1 }}</span>
        </div>
        <div class="meum">
          菜品质量
          <van-rate
            size="14px"
            gutter="5px"
            color="#fdc203"
            class="stars"
            v-model="value2"
            allow-half
            void-icon="star"
            void-color="#eee"
          />
          <span class="score-num">{{ value2 }}</span>
        </div>
        <div class="arrive-time">
          送达时间
          <span class="time">20分钟</span>
        </div>
      </div>
    </div>

    <div class="nav">
      <van-tabs
        type="card"
        @click="onClick"
        color="#ffc301"
        title-active-color="#000"
      >
        <van-tab :title="`全部${rateList.length}`">
          <div class="user df f1" v-for="item in rateList" :key="item.rateTime">
            <!-- 头像 -->
            <div class="userInfo df">
              <img class="avatar" :src="item.avatar" alt="" />
              <div class="right-cont df fdc jcsb">
                <div class="content df jcsb">
                  <div class="user-name">{{ item.username }}</div>
                  <div class="rote-time">
                    {{ item.rateTime | formatYMDhms }}
                  </div>
                </div>
                <div class="rote-star df aic">
                  <van-rate
                    :size="15"
                    color="#ffd21e"
                    v-model="item.score"
                    readonly
                  />
                  <div class="d-time">{{ item.deliveryTime }}分钟送达</div>
                </div>
                <div class="describe">{{ item.text }}</div>
                <div class="type fd">
                  <span
                    class="cut"
                    v-for="subIitem in item.recommend"
                    :key="subIitem"
                  >
                    {{ subIitem }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab :title="`满意${goodRateList.length}`">
          <div
            class="user df f1"
            v-for="item in goodRateList"
            :key="item.rateTime"
          >
            <!-- 头像 -->
            <div class="userInfo df">
              <img class="avatar" :src="item.avatar" alt="" />
              <div class="right-cont df fdc">
                <div class="content df jcsb">
                  <div class="user-name">{{ item.username }}</div>
                  <div class="rote-time">
                    {{ item.rateTime | formatYMDhms }}
                  </div>
                </div>
                <div class="rote-star df aic">
                  <van-rate
                    :size="15"
                    color="#ffd21e"
                    v-model="item.score"
                    readonly
                  />
                  <div class="d-time">{{ item.deliveryTime }}分钟送达</div>
                </div>
                <div class="describe">{{ item.text }}</div>
                <div class="type fd">
                  <span
                    class="cut"
                    v-for="subIitem in item.recommend"
                    :key="subIitem"
                  >
                    {{ subIitem }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab :title="`不满意${badRateList.length}`">
          <div
            class="user df f1"
            v-for="item in badRateList"
            :key="item.rateTime"
          >
            <!-- 头像 -->
            <div class="userInfo df">
              <img class="avatar" :src="item.avatar" alt="" />
              <div class="right-cont df fdc jcsb">
                <div class="content1 df jcsb">
                  <div class="user-name">{{ item.username }}</div>
                  <div class="rote-time">
                    {{ item.rateTime | formatYMDhms }}
                  </div>
                </div>
                <div class="rote-star df aic">
                  <van-rate
                    :size="15"
                    color="#ffd21e"
                    v-model="item.score"
                    readonly
                  />
                  <div class="d-time">{{ item.deliveryTime }}分钟送达</div>
                </div>
                <div class="describe">{{ item.text }}</div>
                <div class="type fd">
                  <span
                    class="cut"
                    v-for="subIitem in item.recommend"
                    :key="subIitem"
                  >
                    {{ subIitem }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <!-- 评论内容 -->
  </div>
</template>

<script>
import {mapState, mapGetters} from 'vuex'
export default {
  data() {
    return {
      value1: 4.5,
      value2: 4.5,
      active: 0,
    }
  },
  methods: {
    onClick(name, title) {},
  },
  computed: {
    ...mapState('shop', ['rateList']),
    ...mapGetters('shop', ['goodRateList', 'badRateList']),
  },
  created() {
    this.$store.dispatch('shop/A_getShopRate')
  },
}
</script>

<style lang="scss" scoped>
.mark {
  width: 100%;
  height: 120px;
  padding: 20px 0;
  background: #fff;
  border-top: 2px solid #f4f5f7;
  .mark-left {
    width: 38%;
    padding: 0 15px;
    text-align: center;
    border-right: 2px solid #f4f5f7;
    .num {
      font-size: 30px;
      color: #fdc203;
      font-weight: bold;
    }
    .total {
      font-size: 16px;
      font-weight: bold;
    }
    .higher {
      color: gray;
      font-size: 12px;
    }
  }
  .mark-right {
    padding: 0 15px;
    font-size: 14px;
    font-weight: bold;
    .stars {
      margin: 0 8px;
    }
    .score-num {
      font-size: 16px;
      color: #fdc203;
    }
    .time {
      color: gray;
      margin-left: 8px;
      font-weight: normal;
    }
  }
}
.nav {
  width: 100%;
  height: 100%;
  margin-top: 25px;
}
.info {
  width: 80%;
  height: 150px;
  background: #fdc203;
}
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.user {
  width: 100%;
  height: 150px;
  background: hotpink;
  margin-top: 20px;
  border-bottom: 1px solid #eee;
}
.right-cont {
  width: 100%;
  margin-left: 15px;
}
.userInfo {
  width: 100%;
}
</style>
